<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #app {
        position: relative;
        width: 300px;
        height: 300px;
      }
      #app > img {
        display: block;
        width: 300px;
        height: 300px;
      }
      #app a {
        position: absolute;
        top: 100px;
      }
      #app .prev {
        left: 10px;
      }
      #app .next {
        right: 10px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <img :src="imgList[index]" />
      <a href="#" class="prev" v-on:click="prev" v-show="index>0">
        <img src="../images/prev.png" />
      </a>
      <a href="#" class="next" @click="next" v-show="index<imgList.length-1"
        ><img src="../images/next.png"
      /></a>
    </div>

    <script src="../lib/vue.js"></script>

    <script>
      let vm = new Vue({
        el: '#app',
        data: {
          imgList: [
            '../images/100.jpg',
            '../images/200.jpg',
            '../images/300.jpg',
            '../images/400.jpg',
            '../images/500.jpg',
          ],
          index: 0,
        },
        methods: {
          prev: function () {
            this.index--
          },
          next: function () {
            this.index++
          },
        },
      })
    </script>
  </body>
</html>
